<template>
	<div class="hot-books">
		<h3 style="margin-top: 1rem;">热门推荐</h3>
		<ul class="hot-books-list">
				<li
				v-for="item in books" :key="item.id"
				@click="$router.push('/book_detail'+item.id)">
					<a class="no-style">
						{{ item.title }}
					</a>
				</li>
			
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				books: []
			}
		},
		methods: {
			
		},
		created() {
			this.axios.get('/book/hot')
			.then(response => {
				if(response.status >= 200 & response.status <= 300){
					this.books = response.data;
				}
			})
			.catch(error => console.log(error));
		}
	}
</script>

<style>
	.hot-books {
		text-align: center;
		width: 20%;
		border-radius: 5px;
		background-color: #f3f3f3;
		color: black;
		font: 14px -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
	}
	.hot-books-list {
		list-style: none;
	}
	.hot-books-list a {
		display: block;
		width: 100%;
		height: 100%;
		line-height: 30px;
		color: #18191C;
	}
	.hot-books-list li {
		margin: 0.5rem 1rem;
	}
	.hot-books-list li:hover {
		background-color: #FFFFFF;
		cursor: pointer;
	}
	
</style>
